<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏小案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style-type: none;
        }
        main{
            
            height: 800px;
            width: 800px;
            margin: 20px auto 10px;
        }
        ul,ol{
            display: flex;
        }
        ol{
            border-bottom:1px solid #ccc;
        }
        ol li {
            margin-right: 10px;
            height: 5px;
            border: none;
            text-align: center;
            border-radius:0 0 0 0;
        }
        li{
            width: 80px;
            height: 30px;
            border-radius: 15px 15px;
            margin-right: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }
        .active{
            border-bottom: 1px solid red;
            border-radius: 10px 10px 0 0;
            background: red;
            color: #fff;
        }
        .line{
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            background: red;
        }
    </style>
</head>
<body>
    <main>
        <ul>
            <li  data-index="0">导航1</li>
            <li data-index="1">导航2</li>
            <li data-index="2">导航3</li>
            <li data-index="3">导航4</li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </main>
    <script>
        let ul = document.querySelector('ul')
        let liList = document.querySelectorAll('ul li')
        let oliList = document.querySelectorAll('ol li')

        ul.addEventListener('click',function(e){
            liList.forEach((item)=>{
                item.className = ''
            })
            oliList.forEach((item)=>{
                item.className = ''
            })
            if(e.target.tagName === 'LI'){
                let index = e.target.getAttribute('data-index')
                oliList[index].className = 'line'
                e.target.className = 'active'
            }
        },false)
        // ul.click()
    </script>
    <script>
    // 给你一个整数数组 arr 和一个整数 k 。现需要从数组中恰好移除 k 个元素，请找出移除后数组中不同整数的最少数目。
    // 输入：：arr = [4,3,1,1,3,3,2], k = 3
    // 输出：2
    // 解释：先移除 4、2 ，然后再移除两个 1 中的任意 1 个或者三个 3 中的任意 1 个，最后剩下 1 和 3 两种整数。
    /**
    * @name
    * @param  arr { Array[number] }
    *         k { number}
    *  @return  { number}
    */
   let arr = [4,3,1,1,3,3,2], k = 3;
    function quchu(arr,k){
        let obj = {}
        arr.map((item)=>{
            // if(obj.item){
            //     obj.item++
            // }else{
            //     obj.item = 0
            // }
            console.log(obj.item)
        })
    }
    </script>
</body>
</html>